<template>
  <div class="orderCard">
    <div class="cardBody">
      <nut-image
        class="goodsImg"
        :src="
          commonStore.img_domain + options.spec_image
            ? commonStore.img_domain + options.spec_image
            : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png '
        "
        @click="showFn(commonStore.img_domain + options.spec_image)"
      >
        <template #error>
          <nut-image
            src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
          />
        </template>
      </nut-image>

      <div class="cardRigth">
        <div class="rightTop jscenter">
          <p class="title texthiden">
            {{ options.goods_name }}
          </p>
          <p class="rightPrice"><span>￥</span>{{ options.format_price }}</p>
        </div>
        <p class="type texthiden">
          规格
          {{ options.goods_spec }}
        </p>
        <div class="rightBottom jscenter">
          <p class="title">数量</p>
          <p class="count">{{ options.quantity }}</p>
        </div>
      </div>
    </div>

    <div class="cardBottom jscenter" v-if="!isDetails">
      <p class="bottomtitle">退款金额</p>
      <p class="refoundPrice"><span>￥</span>{{ options.format_price }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import useCommonStore from "@/store/common";
const commonStore = useCommonStore();
const props = defineProps<{ options: any; isDetails?: boolean }>();
const emits = defineEmits(["show"]);
const showFn = (url: string) => {
  emits("show", url);
};
</script>

<style lang="scss" scoped>
.orderCard {
  width: 100%;
  .cardBody {
    position: relative;
    padding: 20px 0;
    display: flex;
    .goodsImg {
      border-radius: 16px;
      :deep(img) {
        width: 132px;
        height: 132px;
      }
    }
    .cardRigth {
      margin-left: 24px;
      margin-right: auto;
      width: -webkit-fill-available;
      .rightTop {
        .title {
          width: 330px;
          font-weight: 500;
          font-size: 32px;
          color: #000000;
        }
        .rightPrice {
          color: #000000;
          font-size: 20px;
        }
      }

      .type {
        margin: 10px 0;
        width: 330px;
        font-size: 24px;
        color: #999999;
      }
      .rightBottom {
        .title {
          font-weight: 500;
          font-size: 24px;
          color: #999999;
        }
        .count {
          color: #000000;
          font-size: 18px;
        }
      }
    }
  }
  .cardBottom {
    padding-bottom: 30px;
    .bottomtitle {
      color: #000000;
      font-size: 28px;
    }
    .refoundPrice {
      color: #f55726;
      font-size: 28px;
      span {
        font-size: 18px;
      }
    }
  }
}
</style>
